<template>
  <div
    class="graph-container b b-red b-solid"
    ref="graphRef"
    :style="{
      width: props.width + 'px',
      height: props.height + 'px',
    }"
  ></div>
</template>
<script lang="ts" setup>
import { onMounted, shallowRef, useTemplateRef } from 'vue'
import { Graph } from '@antv/g6'
import { registerBase, generateData } from './utils'
import type { ETLNodeItem } from './type'
registerBase()
defineOptions({ name: 'G6Graph' })
const props = defineProps<{
  width: number
  height: number
  data: ETLNodeItem[]
}>()
/**图表容器 */
const container = useTemplateRef('graphRef')
/**
 * 图表实例
 */
const graphInstance = shallowRef<Graph>()

/**
 * 初始化图表
 */
const initGraph = () => {
  graphInstance.value = new Graph({
    container: container.value as HTMLElement,
    width: props.width,
    height: props.height,
    behaviors: [
      'drag-canvas',
      'zoom-canvas',
      'drag-node',
      // {
      //   type: 'create-edge',
      //   trigger: 'click',
      //   style: {
      //     stroke: 'red',
      //     lineWidth: 2,
      //   },
      // },
    ], // drag-node 未包含在内置 behaviors需要注册使用
    data: generateData(props.data), // v5与v4不同,v5可以使用data在初始化时注入默认数据
    edge: {
      type: 'polyline',
      style: {
        endArrow: true,
        router: {
          type: 'orth',
        },
      },
    },
  })
  graphInstance.value.render()
}
onMounted(() => {
  initGraph()
})
</script>
<style lang="scss"></style>
